<!--
 * @Author: fishroom
 * @Date: 2021-08-22 23:06:04
 * @LastEditTime: 2021-09-03 14:35:25
 * @FilePath: \backstage\src\views\map\Map.vue
-->

<template>
  <div class="g-width wrap">
    <!-- 主图片 -->
    <div class="master">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbbsfiles.vivo.com.cn%2Fvivobbs%2Fattachment%2Fforum%2F201803%2F26%2F123739m86gvvazh8tiu99i.jpg&refer=http%3A%2F%2Fbbsfiles.vivo.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632489513&t=68ff373eea4f7be927cafeb5ee10d987"
        alt=""
        class="g-img"
      />
    </div>
    <!-- 级联选择器 -->
    <div class="location">
      <!-- 省份 -->
      <div class="provice">
        <label for="">省份:</label>
        <input-item :List="arr" @tabClick="tabClick" />
      </div>
      <!-- 城市 -->
      <div class="city">
        <label for="">城市:</label>
        <input-two v-if="flag" :List="list" @ChildClick="ChildClick" />
        <input-item v-if="!flag" />
      </div>
      <!-- 类型 -->
      <div class="area">
        <label for="">类型:</label>
        <TypeItem :List="typeList" @tabClick="typeGetVal" />
      </div>

      <el-button @click="mapSearch">搜索</el-button>
    </div>
    <!-- 地图插件 -->
    <info-window :markers="mapList" :map="m"></info-window>
    <!-- <Sideshow /> -->
  </div>
</template>

<script>
import TypeItem from "components/content/input/TypeItem.vue";
import InputItem from "components/content/input/InputItem.vue";
import InputTwo from "components/content/input/InputTwo.vue";
import { mapActions } from "vuex";
import InputThree from "components/content/input/InputThree.vue";
import InfoWindow from "./infoWindow.vue";
// import Sideshow from '../../components/Sideshow.vue';
export default {
  name: "Map",
  data() {
    return {
      list: [],
      flag: false,
      sreachObj: { typeId: 0, provinceId: 0, cityId: 0 },
      m: {
        center: {
          lng: 103.92373,
          lat: 30.57444
        },
        zoom: 10,
        width: "100%",
        height: "100%"
      },
      arr: [{ name: "四川省", id: 510000 }]
    };
  },
  computed: {
    inputList() {
      return this.$store.state.mapSelectList;
    },
    typeList() {
      return this.$store.state.TypeList;
    },
    mapList() {
      return this.$store.state.MapSearchList;
    }
  },

  components: {
    InputItem,
    InputTwo,
    InputThree,
    InfoWindow,
    TypeItem
    // Sideshow,
  },
  methods: {
    ...mapActions(["getMapSelect", "getMapSearch", "getTypeItem"]),
    tabClick(index, e, id) {
      this.sreachObj.provinceId = id;
      this.flag = true;
      this.count = index;
      if (this.inputList[22]?.children) {
        this.list = [...this.inputList[22].children];
      }
    },
    ChildClick(index, e, id) {
      this.sreachObj.cityId = id;
      this.isflag = true;
      if (this.inputList[this.count].children[index]?.children) {
        this.listChild = [
          ...this.inputList[this.count].children[index].children
        ];
      } else {
        this.listChild = [];
      }
    },
    typeGetVal(index, e, id) {
      this.sreachObj.typeId = id;
    },
    mapSearch() {
      this.getMapSearch(this.sreachObj);
    }
  },
  created() {
    this.getMapSelect();
    this.getTypeItem();
  }
};
</script>
<style lang="scss" scoped>
@import url("../../style/map.scss");
// 主图片
.master {
  img {
    width: 100%;
  }
}
// 级联选择器
.location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .provice,
  .city,
  .area,
  .coding {
    display: flex;
    align-items: center;
    width: 20%;
    label {
      width: 30%;
    }
    select {
      width: 70%;
      padding: 0.5rem 0.2rem;
    }
  }
  button {
    padding: 0.5rem 0.8rem;
  }
}
</style>
